<template>
	<view class="content" :style="'width: '+ (windowWidth) +'px; height: '+ (boxStyle.height)  + 'px;'">
		<swiper class="swiper" 
		:autoplay="autoplay" 
		:duration="duration"
		:style="'width: '+ (windowWidth) +'px; height: '+ (boxStyle.height +30)  + 'px;'">
			<swiper-item>
				<view class="swiper-item" >
					<view class="swiper-item-img" :style="'width: '+ (windowWidth) +'px; height: '+ (boxStyle.height)  + 'px;'" style="background-size: cover;"><image src="../../static/dao1.jpg" mode="aspectFit" :style="'width: '+ (windowWidth) +'px; height: '+ (boxStyle.height+50)  + 'px;'" style="background-size: cover;"></image></view>
					<!-- <view class="swiper-item-img"><image src="../../static/title_02.jpg" mode="aspectFit"></image></view> -->
				</view>
				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img" :style="'width: '+ (windowWidth) +'px; height: '+ (boxStyle.height)  + 'px;'"><image src="../../static/dao2.jpg" mode="aspectFit" :style="'width: '+ (windowWidth) +'px; height: '+ (boxStyle.height+50)  + 'px;'"></image></view>
					<!-- <view class="swiper-item-img"><image src="../../static/icon_02.png" mode="aspectFit"></image></view> -->
				</view>
				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
			</swiper-item>
<!-- 			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img"><image src="../../static/title_03.jpg" mode="aspectFit"></image></view>
				</view>
				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
			</swiper-item> -->
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img" :style="'width: '+ (windowWidth) +'px; height: '+ (boxStyle.height)  + 'px;'"><image src="../../static/dao3.jpg" mode="aspectFit" :style="'width: '+ (windowWidth) +'px; height: '+ (boxStyle.height+50)  + 'px;'"></image></view>
				</view>
				<view class="experience" @tap="launchFlag()" style="top: 40px;">{{experience}}</view>
			</swiper-item>
		</swiper>
		<!-- <view class="uniapp-img"><image src="../../static/guide/uniapp4@2x.png" mode="aspectFit"></image></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				autoplay: false,
				duration: 500,
				jumpover: '跳过',
				experience: '立即体验',
				wHeight: 0, //获取的屏幕高度🌟💗
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				deleteHeight: 0, //测试高度🌟💗
				windowWidth: 0, //获取屏幕宽度🌟💗,
					platform: '', //用于获取操作系统：ios、android🌟💗
			}
		},
		created() {
			this.platform = uni.getSystemInfoSync().platform
			var model = uni.getSystemInfoSync().model
			if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !==
					'iPhone8')) {
				this.deleteHeight = 32 //有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
			this.boxStyle.height = this.wHeight - this.deleteHeight; //改变视频高度
		},
		onLoad() {
			this.platform = uni.getSystemInfoSync().platform
			var model = uni.getSystemInfoSync().model
			if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !==
					'iPhone8')) {
				this.deleteHeight = 32 //有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
			this.boxStyle.height = this.wHeight - this.deleteHeight; //改变视频高度
		},
		methods: {
			launchFlag: function(){
				/**
				 * 向本地存储中设置launchFlag的值，即启动标识；
				 */
				uni.setStorage({
						key: 'launchFlag',
						data: true,
				});
				uni.switchTab({
					url: '/pages/index/index'
				});
				
			}
		}
	}
</script>
<style scoped>
	uni-page-body{
		background: #FFFFFF;
	}
	*{
		padding: 0;
		margin: 0;
	}
	/deep/ uni-swiper .uni-swiper-slides{
		    /* top: 80upx; */
	}
	page,
	.content{
		width: 100%;
		height: 90%;
		background-size: 90% auto ;
		background-size: cover;
		/* margin-top: 50upx; */
		padding: 0;
	}
	.swiper{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
	}
	.swiper-item {
		width: 100%;
		height: 100%;
		text-align: center;
		position: relative;
		display: flex;
		justify-content: center;
		align-items:flex-end;
		flex-direction:column-reverse
	}
	.swiper-item-img{
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	.swiper-item-img image{
		width: 100%;
		height: 100%;
		background-size: cover !important;
	}
	/deep/ uni-image>div{
		background-size: cover !important;
	}
	.uniapp-img{
		height: 20%;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items:center;
		overflow: hidden;
	}
	.uniapp-img image{
		width: 40%;
	}
	
	.jump-over,.experience{
		position: absolute;
		height: 60upx;
		top: 0;
		line-height: 60upx;
		padding: 0 40upx;
		border-radius: 30upx;
		font-size: 32upx;
		color: #333;
		border: 1px solid #333;
		z-index: 999;
	}
	.jump-over{
		right: 45upx;
		top: 80upx;
	}
	.experience{
		right: 50%;
		margin-right: -105upx;
		bottom: 50px;
	}
</style>
